<template>
	<view class="refund_schedule">
		<view class="refund_schedule_header">
			<!-- 退款进行中 /退款退货进行中 -->
			<!-- 进度类型 0-提交申请、1-再次提交、2-平台审核、3-审核通过、
			4-审核未通过、
			5-寄回商品、6-寄回审核通过、7-寄回审核失败、
			8-平台退款、9-退款成功、10-退款失败 -->
			<!--  退款失败 -->
			<image src="http://qianxueapplet.suoeryun.com/shibai.png"
				v-if="orderInfo?.scheduleType === '4' || orderInfo?.scheduleType === '10' || orderInfo?.scheduleType === '7'">
			</image>
			<!--  退款成功/退款退货成功 -->
			<image src="http://qianxueapplet.suoeryun.com/chenggong.png" v-else-if="orderInfo?.scheduleType === '9'">
			</image>
			<image src="http://qianxueapplet.suoeryun.com/inprogress1.png" v-else>
			</image>
			<view>
				<!-- 退款 -->
				<template v-if="orderInfo?.returnType  === '1'">
					<template
						v-if="orderInfo?.scheduleType === '4' || orderInfo?.scheduleType === '10' || orderInfo?.scheduleType === '7'">退款失败</template>
					<template v-else-if="orderInfo?.scheduleType === '9'">退款成功</template>
					<template v-else>退款进行中</template>
				</template>
				<!-- 退款退货 -->
				<template v-else>
					<template
						v-if="orderInfo?.scheduleType === '4' || orderInfo?.scheduleType === '10' || orderInfo?.scheduleType === '7'">退款退货失败</template>
					<template v-else-if="orderInfo?.scheduleType === '9'">退款退货成功</template>
					<template v-else>退款退货进行中</template>
				</template>
			</view>
		</view>
		<view class="refund_schedule_info">
			<view class="refund_schedule_info_item">
				<text>申请退款金额</text>
				<text>¥{{orderInfo?.applyPrice}}</text>
			</view>
			<view class="refund_schedule_info_item">
				<text>实际退款金额</text>
				<text>¥{{orderInfo?.payAmount}}</text>
			</view>
		</view>
		<view class="refund_schedule_progress">
			<view class="refund_schedule_progress_header">退款进度</view>
			<uniSteps :options='orderInfo?.scheduleList' @handleShow="handleShow"
				v-if="orderInfo?.scheduleList?.length > 0"></uniSteps>
		</view>
		<!--  退款退货进行中-->
		<view class="refund_schedule_progress refund_schedule_returninfo" style="padding-bottom: 24rpx;"
			v-if="orderInfo?.scheduleType ===  '5' && orderInfo?.returnType === '2' && !orderInfo?.logisticCode">
			<view class="card_header">退货信息（请将商品寄回到该地址）</view>
			<view class="refund_schedule_returninfo_row">
				<view class="refund_schedule_returninfo_row_1">
					<text>{{orderInfo?.consignee}}</text>&nbsp;
					<text>{{maskPhoneNumber(orderInfo?.phoneNumber)}}</text>
				</view>
				<view class="refund_schedule_returninfo_row_2">
					<view class="overflow">
						<template v-if="orderInfo?.location">
							{{orderInfo?.location?.replaceAll(',','')}}</template>
						{{orderInfo?.address}}
					</view>
					<button @click="handleCopy">复制</button>
				</view>
				<view class="refund_schedule_returninfo_row_3">
					为了确保您的订单能够快速通过审核，我们的快递仅支持<text>申通、圆通和百世</text>三家。请您在寄回商品时，选择这三家快递中的一家。感谢您的理解和配合！</view>
				<button class="refund_schedule_returninfo_row_btn" @click="handleReturnLogistics">我已寄出，填写物流单号</button>
			</view>
			<!-- <view class="refund_schedule_returninfo_btm">
				我已寄出，填写物流单号
			</view> -->
		</view>
		<!-- 退货信息  -->
		<view class="refund_schedule_return" v-if="orderInfo?.returnType  === '2' && orderInfo?.logisticCode">
			<view class="card_header">退货信息</view>
			<view class="refund_schedule_return_item">
				<text class="refund_schedule_return_item_1">物流单号</text>
				<text class="refund_schedule_return_item_2">{{orderInfo?.logisticCode}}</text>
			</view>
			<view class="refund_schedule_return_item">
				<text class="refund_schedule_return_item_1">物流公司</text>
				<text class="refund_schedule_return_item_2">
					<!-- 申通、圆通、百世  STO、YTO、HTKY-->
					<template v-if="orderInfo?.shipperCode === 'STO'">申通</template>
					<template v-if="orderInfo?.shipperCode === 'YTO'">圆通</template>
					<template v-if="orderInfo?.shipperCode === 'HTKY'">百世</template>
				</text>
			</view>
			<view class="refund_schedule_return_item">
				<text class="refund_schedule_return_item_1">联系电话</text>
				<text class="refund_schedule_return_item_2">{{orderInfo?.phone}}</text>
			</view>
			<view class="refund_schedule_return_item" v-if="orderInfo?.sendBackReplenish || orderInfo?.sendBackImages">
				<text class="refund_schedule_return_item_1">补充描述和凭证</text>
			</view>
			<view class="refund_schedule_return_description" v-if="orderInfo?.sendBackReplenish">
				{{orderInfo?.sendBackReplenish}}
			</view>
			<view class="refund_schedule_return_imgs" v-if="orderInfo?.sendBackImages">
				<image :src="item" v-for="(item,index) in orderInfo?.sendBackImages?.split(',')" :key="index"
					@click="handlePreview(index)"></image>
			</view>
		</view>
		<!-- 退款信息  -->
		<view class="refund_schedule_refund" v-if="orderInfo?.returnType  === '2'">
			<view class="card_header">退款信息</view>
			<view class="refund_schedule_refund_goods">
				<image :src="orderInfo?.goodsImages"></image>
				<view class="refund_schedule_refund_goods_right">
					<view class="refund_schedule_refund_goods_right_1">{{orderInfo?.goodsName}}</view>
					<view class="refund_schedule_refund_goods_right_2">
						<text v-if="orderInfo?.specifications">{{orderInfo?.specifications}}</text><text> x 1</text>
					</view>
				</view>
			</view>
			<view class="refund_schedule_refund_item">
				<text class="refund_schedule_refund_item_1">退款原因</text>
				<text class="refund_schedule_refund_item_2">{{returnCauseText}}</text>
			</view>
			<view class="refund_schedule_refund_item">
				<text class="refund_schedule_refund_item_1">退款金额</text>
				<text class="refund_schedule_refund_item_2">{{orderInfo?.applyPrice}}</text>
			</view>
			<view class="refund_schedule_refund_item">
				<text class="refund_schedule_refund_item_1">申请件数</text>
				<text class="refund_schedule_refund_item_2">{{orderInfo?.orderNum}}</text>
			</view>
			<view class="refund_schedule_refund_item">
				<text class="refund_schedule_refund_item_1">申请时间</text>
				<text class="refund_schedule_refund_item_2">{{orderInfo?.createTime}}</text>
			</view>
		</view>
		<!-- 温馨提示 -->
		<view class="refund_schedule_warning">
			<view class="refund_schedule_warning_header">温馨提示</view>
			<view class="refund_schedule_warning_item">1.每个订单您只可以申请两次退款，请在退款申请中清晰描述具体的退款原因，方便平台更快更好地审核；</view>
			<view class="refund_schedule_warning_item">2.退款的金额将在平台审核通过后及时退回到您的原账户，请及时关注退款动态；</view>
			<view class="refund_schedule_warning_item">3.如果您在退款过程中遇到任何问题或需要帮助，请随时联系客服团队，我们会尽快为您解决问题</view>
		</view>
		<view style="height: 85rpx;"></view>
	</view>
	<view class="refund_schedule_btm btm_btm">
		<view class="btm_btm_row safe_area">
			<!-- 客服 -->
			<button open-type="contact" class="default">联系客服</button>
			<!--退款进行中 -->
			<button @click="handleCancellationApplication" v-if="orderInfo?.scheduleType === '2'">撤销申请</button>
			<!-- 退款失败  -->
			<button @click="handleAfterSale"
				v-else-if="orderInfo?.scheduleType === '4' && orderInfo?.applyNum < 2">再次申请</button>
		</view>
	</view>
	<u-popup :show="show" :round="12" @touchmove.stop.prevent="" closeOnClickOverlay @close="handleClose">
		<view class="popup_process">
			<view class="popup_process_header">退款进度</view>
			<scroll-view class="popup_process_scroll" scroll-y>
				<uniSteps :options='orderInfo?.scheduleList' :isShowSee="false"></uniSteps>
			</scroll-view>
		</view>
	</u-popup>
</template>

<script lang="ts" setup>
	import uniSteps from '@/components/wangxiaohua--steps/index.vue';
	import { ref, unref, computed } from 'vue';
	import { onLoad, onUnload } from '@dcloudio/uni-app';
	import { maskPhoneNumber } from '@/util/index';
	import { qxGoodsOrderReturnQueryById, revokeApplication, queryDefaultAddress } from '@/config/goodStuff.api';
	import { getDictItemsByCode } from '@/config/sys.api';

	const show = ref(false);
	const orderInfo = ref();
	const returnCauseList = ref();

	const returnCauseText = computed(() => {
		const textList = returnCauseList.value?.filter(item => item?.value === orderInfo.value?.orderReturnCause);
		if (textList?.length > 0) {
			return textList[0]?.text;
		}
		return '';
	})

	onLoad(async (params) => {
		console.log(params, 'params');
		// 寄回商品成功 回调
		uni.$on('returnLogistics', _ => {
			loadData();
		})
		orderInfo.value = params;
		await loadData();

		// 获取退货原因数据
		const result = await getDictItemsByCode({ dictCode: 'order_return_cause' });
		returnCauseList.value = result;
		if (orderInfo.value?.scheduleType === '5' && orderInfo.value?.returnType === '2' && !orderInfo.value?.logisticCode) {
			// 查询退货默认地址
			const res = await queryDefaultAddress({});
			console.log(res, 'sdf');
			orderInfo.value.consignee = res?.contactPerson;
			orderInfo.value.phoneNumber = res?.contactNumber;
			orderInfo.value.location = res?.provincesName;
			orderInfo.value.locationCode = res?.provincesCode;
			orderInfo.value.address = res?.address;
		}
	})

	onUnload(() => {
		uni.$off('returnLogistics')
	})


	async function loadData() {
		const params = unref(orderInfo)
		const res = await qxGoodsOrderReturnQueryById({ id: params?.returnId });
		orderInfo.value = { ...params, ...res };
	}

	/**
	 * 撤销申请
	 */
	function handleCancellationApplication() {
		uni.showModal({
			content: '是否撤销申请该订单？',
			confirmColor: '#FF943C',
			success: async (res) => {
				if (res?.confirm) {
					const res = await revokeApplication({ id: orderInfo.value?.id });
					uni.showToast({
						icon: 'success',
						title: res,
						success() {
							uni.navigateBack({
								success() {
									uni.$emit('orderDetails');
								}

							})
						}
					})
				} else { }
			},
			fail: (res) => {
				console.log(res, 'sdf');
			}
		})
	}

	/**
	 * 申请售后/再次申请
	 */
	function handleAfterSale() {
		uni.$u.route('/pages/goodStuff/afterSale', {
			id: orderInfo.value?.id,
			orderId: orderInfo.value?.orderId,
		});
	}

	/**
	 * 复制
	 */
	function handleCopy() {
		const item = unref(orderInfo);
		uni.setClipboardData({
			data: `${item?.consignee} ${item?.phoneNumber} ${item?.location ? item?.location?.replaceAll(',', '') : ''}${item?.address}`,
			success: function () {
				uni.showToast({
					icon: 'none',
					title: '复制成功!'
				})
			}
		});
	}

	/**
	 * 填写物流信息
	 */
	function handleReturnLogistics() {
		const item = unref(orderInfo);
		uni.$u.route('/pages/goodStuff/returnLogistics', {
			id: item?.id,
			consignee: item?.consignee,
			phoneNumber: item?.phoneNumber,
			location: item?.location,
			locationCode: item?.provincesCode,
			address: item?.address,
			orderId: item?.orderId,
		});
	}

	/**
	 * 步骤条回调
	 */
	function handleShow() {
		show.value = true;
	}

	/**
	 * 退款进度 弹出层关闭
	 */
	function handleClose() {
		show.value = false;
	}

	/**
	 * 图片预览
	 */
	function handlePreview(index) {
		uni.previewImage({
			urls: orderInfo.value?.sendBackImages?.split(','),
			count: index,
		})
	}
</script>

<style lang="scss" scoped>
	.refund_schedule {
		padding: 0 24rpx;

		.refund_schedule_header {
			padding-top: 72rpx;
			padding-bottom: 24rpx;
			text-align: center;
			font-size: 40rpx;
			font-weight: 500;

			image {
				width: 176rpx;
				height: 162rpx;
				margin: 0 auto 32rpx auto;
				display: block;
			}
		}

		.refund_schedule_info {
			.refund_schedule_info_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 24rpx;

				text {
					font-size: 30rpx;

					// &:nth-child(1) {}

					// &:nth-child(2) {}
				}

				&:last-child {
					padding-bottom: 0;
				}
			}
		}

		.card_header {
			font-size: 32rpx;
			padding-bottom: 24rpx;
			font-weight: bold;
		}

		.refund_schedule_progress {
			padding: 24rpx 24rpx 0 24rpx;

			.refund_schedule_progress_header {
				font-weight: bold;
			}

			.card_header {
				padding: 26rpx 24rpx;
				background-color: #FEECDE;
				border-radius: 12rpx 12rpx 0 0;
				font-size: 32rpx;
				font-weight: 500;
			}

			.refund_schedule_returninfo_row {
				padding: 24rpx 24rpx 0 24rpx;

				.refund_schedule_returninfo_row_2 {
					border-bottom: 1px solid #D8D8D8;

					.overflow {
						flex: 1;
						margin-right: 6rpx;
					}
				}

				.refund_schedule_returninfo_row_3 {
					font-size: 30rpx;
					color: #999999;
					padding: 24rpx 0;
					// margin-top: 24rpx;
					line-height: 38rpx;

					text {
						color: #FF3838;
					}
				}

				.refund_schedule_returninfo_row_btn {
					background-color: #FF943C;
					font-size: 30rpx;
					color: #fff;
					font-weight: bold;
					margin: 0;
					padding: 0;
					line-height: 66rpx;
					height: 68rpx;

					&::after {
						border: 0;
					}
				}
			}

			.refund_schedule_returninfo_btm {
				margin-top: 30rpx;
				border-top: 2rpx solid #D8D8D8;
				text-align: center;
				font-size: 28rpx;
				color: #FF943C;
				padding: 30rpx 0 6rpx 0;
				font-weight: 500;
			}
		}

		// 退货信息
		.refund_schedule_return {

			.refund_schedule_return_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				padding-bottom: 20rpx;
			}

			.refund_schedule_return_description {
				font-size: 28rpx;
				color: #525252;
				padding: 24rpx;
				background-color: #F6F6F6;
				border-radius: 12rpx;
				min-height: 180rpx;
				margin-bottom: 24rpx;
			}

			.refund_schedule_return_imgs {
				margin-right: -24rpx;

				image {
					width: 112rpx;
					height: 112rpx;
					margin-right: 24rpx;
					border-radius: 12rpx;
					margin-bottom: 10rpx;
				}
			}
		}

		// 退款信息
		.refund_schedule_refund {
			.refund_schedule_refund_goods {
				display: flex;
				align-items: flex-start;

				image {
					width: 190rpx;
					height: 190rpx;
					margin-right: 24rpx;
					border-radius: 12rpx;
				}

				.refund_schedule_refund_goods_right {
					flex: 1;

					.refund_schedule_refund_goods_right_1 {
						font-size: 32rpx;
						font-weight: 500;
						padding-bottom: 8rpx;
					}

					.refund_schedule_refund_goods_right_2 {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-top: 18rpx;

						text {
							font-size: 24rpx;
							vertical-align: middle;

							&:nth-child(1) {
								color: #666666;
								font-size: 24rpx;
								padding: 6rpx 14rpx;
								background-color: #EDEDED;
								// font-weight: bold;
							}

							&:nth-child(2) {}
						}
					}
				}
			}

			.refund_schedule_refund_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 24rpx;
				font-size: 28rpx;

				.refund_schedule_refund_item_1 {
					color: #666666;
					width: 130rpx;
				}

				.refund_schedule_refund_item_2 {
					flex: 1;
				}
			}
		}

		.refund_schedule_returninfo {
			.refund_schedule_returninfo_row {
				.refund_schedule_returninfo_row_1 {
					font-size: 32rpx;
				}

				.refund_schedule_returninfo_row_2 {
					font-size: 30rpx;
					color: #666666;
					display: flex;
					justify-content: space-between;
					align-items: center;

					view {
						width: calc(100vw - 48rpx - 48rpx - 30px);
					}

					button {
						margin: 0;
						padding: 0;
						width: auto;
						background-color: #fff;
						color: #C83F4D;
						font-size: 28rpx;

						&::after {
							border: 0;
						}
					}
				}
			}
		}

		// 温馨提示
		.refund_schedule_warning {
			.refund_schedule_warning_header {
				font-size: 32rpx;
				font-weight: bold;
				padding-bottom: 12rpx;
			}

			.refund_schedule_warning_item {
				font-size: 28rpx;
				line-height: 40rpx;
				padding-bottom: 4rpx;
			}
		}
	}

	.refund_schedule_btm {
		button {
			width: 160rpx;
		}
	}

	.popup_process {
		padding: 40rpx 24rpx;

		.popup_process_header {
			// font-size: 32rpx;
			font-weight: bold;
		}

		.popup_process_scroll {
			height: 55vh;
		}
	}
</style>